<script setup>
import { onShow } from '@dcloudio/uni-app'
import { get, post } from '@/request/request'
import { ref } from 'vue'
import TnNavbar from '@tuniao/tnui-vue3-uniapp/components/navbar/src/navbar.vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import TnTitle from '@tuniao/tnui-vue3-uniapp/components/title/src/title.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import TnInput from '@tuniao/tnui-vue3-uniapp/components/input/src/input.vue'

const moneydata = ref({});
const moneyValue = ref({
  money: 0,
  selected: false,
});
//充值余额
const moneyList = ref([
  { text: 100, selected: false },
  { text: 200, selected: false },
  { text: 500, selected: false },
  { text: 1000, selected: false },
  { text: 2000, selected: false },
  { text: 5000, selected: false },
])
//充值按钮控制
const money = ref(0)
//进入页面函数
onShow(() => {
  getData()
  money.value = 0;
})

//进入页面获取数据
const getData = () => {
  get('/user_money_list', null, { "sessionKey": uni.getStorageSync("sessionKey") }).then(res => {
    const data = res.data;
    moneydata.value = data;
    console.log('/user_money_list', data);
  })
}

//返回按钮
const backClick = () => {
  uni.navigateBack()
}

//充值
const rechargeClick = () => {
  money.value = 1;
  moneyValue.value.money = 0;
  moneyValue.value.selected = false;
}
//确认支付
const confirmRechargeClick = () => {
  if (money.value === 1) {
    const amountRegex = /^\d+(\.\d{1,2})?$/;
    if (moneyValue.value.money === 0 && !moneyValue.value.money) {
      uni.showToast({
        title: '请选择或输入充值金额',
        icon: 'none'
      })
      return false;
    } else if (moneyValue.value.money < 0 || !amountRegex.test(moneyValue.value.money)) {
      uni.showToast({
        title: '请输入正确格式的充值金额',
        icon: 'none'
      })
      return false;
    } else {
      console.log(moneyValue.value.money)
      post('/pay', { money: parseFloat(moneyValue.value.money) }, {
        "Content-Type": "application/x-www-form-urlencoded", "sessionKey": uni.getStorageSync("sessionKey")
      }).then(res => {
        const { data } = res;
        console.log('/pay', data)
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.package,
          signType: data.signType,
          paySign: data.paySign,
          success: function (res) {
            // console.log('success:支付成功' + JSON.stringify(res));
            moneyValue.value.money = 0;
            moneyValue.value.selected = false;
            uni.showToast({
              title: '充值成功',
              icon: 'success'
            })
          },
          fail: function (err) {
            console.log('fail:支付失败' + JSON.stringify(err));
          }
        });
      })
    }
  }
}

const toggleSelected = (item) => {
  moneyList.value.forEach(i => {
    if (i === item) {
      i.selected = !i.selected;
      moneyValue.value.money = item.text
      moneyValue.value.selected = i.selected
    } else {
      i.selected = false; // 取消其他项目的选中状态
    }
  });
}
//手动输入金额是
const insertMoney = () => {
  if (moneyValue.value.selected) {
    moneyList.value.forEach(i => {
      if (i.text !== moneyValue.value.money) {
        i.selected = false; // 取消其他项目的选中状态
      }
    });
  }
}
</script>

<template>
  <template v-if="money === 0">
    <TnNavbar height="428rpx" bg-color="#0d57d6" text-color="#fff" fixed>
      <view style="margin-top: 130rpx;text-align: center;">
        <view style="font-size: 28rpx;color:rgba(255, 255, 255, 1);padding-right: 10rpx">账户余额</view>
        <view style="font-size: 72rpx;color:rgba(255, 255, 255, 1);">{{ moneydata.money }}</view>
      </view>
      <template #back>
        <view style="position: fixed;top: -70rpx;" @click="backClick">
          <TnIcon name="left" size="40" color="#fff" />
        </view>
      </template>
    </TnNavbar>
    <view class="app">
      <view style="width: 100%;margin: 20rpx;">
        <TnTitle title="余额明细" size="lg" />
      </view>
      <view class="order-list">
        <view class="order-list-item" v-for="(item, index) in moneydata.list" :key="index">
          <view style="display: flex;justify-content: center;flex-direction: column;">
            <view style="font-size: 28rpx;">{{ item.sourceText }}</view>
            <view style="font-size: 20rpx;color: rgba(0, 0, 0, 0.6);">{{ item.time }}</view>
          </view>
          <view style="font-size: 28rpx;">{{ item.money }}</view>
        </view>
      </view>
    </view>
  </template>
  <template v-if="money === 1">
    <TnNavbar height="428rpx" bg-color="#0d57d6" text-color="#fff" fixed>
      <view style="display: flex;flex-direction: column;margin-top: 280rpx;margin-left: -484rpx;">
        <view style="font-size: 28rpx;color:rgba(255, 255, 255, 1);">账户余额（元）</view>
        <view style="font-size: 72rpx;color:rgba(255, 255, 255, 1);">{{ moneydata.money }}</view>
      </view>
      <template #back>
        <view style="position: fixed;top: -70rpx;" @click="backClick">
          <TnIcon name="left" size="40" color="#fff" />
        </view>
      </template>
    </TnNavbar>
    <view class="app">
      <view style="width: 100%;margin: 20rpx;">
        <TnTitle title="充值金额" size="lg" />
      </view>
      <view class="money-list">
        <view class="money-list-item" v-for="item in moneyList" :class="{ 'money-selected': item.selected }"
          @click="toggleSelected(item)">
          ¥{{ item.text }}
        </view>
      </view>
      <view style="margin: 20rpx;background: #fff;width: 686rpx;">
        <TnInput v-model="moneyValue.money" type="number" placeholder="请输入充值的金额" @change="insertMoney" size="lg"
          :border="false">
          <template #prefix>
            <text style="color: rgba(0, 82, 217, 1);font-size: 40rpx;">¥</text>
          </template>
        </TnInput>
      </view>
      <view style="margin: 80rpx;">

      </view>
    </view>
  </template>

  <!-- 按钮 -->
  <view class="app">
    <view class="money-btn">
      <TnButton width="686" v-if="money === 0" height="96" bg-color="#0d57d6" text-color="#fff" @click="rechargeClick">
        充值
      </TnButton>
      <TnButton width="686" v-if="money === 1" height="96" bg-color="#0d57d6" text-color="#fff"
        @click="confirmRechargeClick">充值
      </TnButton>
    </view>
  </view>
</template>

<style scoped lang="scss">
.app {
  padding: 20rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);

  .order-list {
    margin: 20rpx;
    width: 686rpx;
    background: #fff;
    border-radius: 18rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 120rpx;

    .order-list-item {
      padding: 10rpx;
      width: 98%;
      height: 106rpx;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: #e6e6e6 1rpx solid;
    }
  }

  .money-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100rpx;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .money-list {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    /* 添加这一行以实现换行 */

    .money-list-item {
      width: calc(33.33% - 10rpx);
      /* 计算宽度，保持一行三个 */
      height: 116rpx;
      margin-bottom: 10rpx;
      /* 添加间距 */
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border: rgba(220, 220, 220, 1) 1rpx solid;
    }

    .money-selected {
      border: #0052D9 1rpx solid;
    }
  }
}
</style>
